﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>查看</title>
    <link href="~/Content/global.css" rel="stylesheet" />
    <link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/lib/layui/layui.all.js"></script>
</head>
<body>
    <h1 class="title-text">@ViewData["title"]</h1>
    <blockquote class="layui-elem-quote">数据更新于 <label id="lb_updatetime"></label></blockquote>
    <table class="layui-table" id="tb">
        <colgroup>
            <col width="50">
            <col width="100">
            <col>
            <col width="250">
            <col width="170">
            <col width="170">
            <col width="100">
        </colgroup>
        <thead>
            <tr>
                <th></th>
                <th>任务</th>
                <th>任务说明</th>
                <th>间隔</th>
                <th>上次执行时间</th>
                <th>下次执行时间</th>
                <th>循环次数</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in table_data">
                <td>{{ index + 1 }}</td>
                <td>{{ item.jobKey }}</td>
                <td>{{ item.remark }}</td>
                <td>{{ item.interval }}</td>
                <td>{{ dateShow(item.lastTrigger, 'false') }}</td>
                <td>{{ dateShow(item.nextTrigger, 'true') }}</td>
                <td><span v-if="item.repeat > 0">{{ item.repeat }}</span><span v-else>无限</span></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

<script src="~/Content/vue.min.js"></script>
<script src="~/Content/moment.js"></script>
<script type="text/javascript">
    var $ = layui.jquery;

    var app = new Vue({
        el: '#tb',
        data: {
            table_data: [{
                "jobKey": "",
                "interval": "",
                "repeat": "",
                "lastTrigger": "",
                "nextTrigger": "",
                "remark" : ""
            }]
        },
        methods: {
            "dateShow": function (timestamp, tail) {
                if (typeof timestamp !== "number" || timestamp === 0) {
                    return "";
                }
                else {
                    var the_moment = moment.unix(timestamp);
                    return formatDate(the_moment, tail);
                }
            }
        }
    })

    $(function () {
        refreshData();
        setInterval(refreshData, 1000 * 150);
    });

    function refreshData() {
        $.get("/api/GetCurrentJobs", {}, function (rs) {
            app.table_data = rs;
        }, "json");

        var the_moment = moment();
        refreshLastDateTimeLabel(the_moment);
        //setInterval(function () { refreshLastDateTimeLabel(the_moment);}, 1000); //refresh "x seconds from...", but it may has confusion issue because grid's count down is non-freshabel
    }


    function refreshLastDateTimeLabel(the_moment) {
        $('#lb_updatetime').text(formatDate(the_moment));
    }

    function formatDate(the_moment, isFutureTime) {
        var now = new Date();
        var today_moment = moment(now);
        var result = "";

        /* 
            (1)间隔2天及以上直接显示时间
            (2)jiange的显示 "昨天/明天+时分秒"

            (3)1个小时前的显示 "今天+时分秒"
            (4)1-60分钟的显示 "今天+时分秒(xx分钟前)"
            (5)小于1分钟的显示 "今天+时分秒(xx秒前)"
        */

        if (today_moment.date() == the_moment.date() && today_moment.month() == the_moment.month() && today_moment.year() == the_moment.year()) { //today
            var diffSeconds = Math.abs(the_moment.diff(now, 'seconds'));

            if (diffSeconds < 3600) {
                if (diffSeconds > 60) { //4
                    result = "今天" + the_moment.format('HH:mm:ss') + ((typeof isFutureTime === "string") ? "(约" + parseInt(diffSeconds / 60) + "分钟" + (isFutureTime === "true" ? "后" : "前") + ")" : "");
                }
                else { //5

                    result = "今天" + the_moment.format('HH:mm:ss') + ((typeof isFutureTime === "string") ? "(" + diffSeconds + "秒" + (isFutureTime === "true" ? "后" : "前") + ")" : "");
                }
            }
            else { //3
                result = "今天" + the_moment.format('HH:mm:ss');
            }
        }
        else {
            var diffDays = Math.abs(the_moment.diff(now, 'day'));
            if (diffDays <= 1 && typeof isFutureTime === "string") { //2
                result = (isFutureTime === "true" ? "明天" : "昨天") + the_moment.format('HH:mm:ss');
            }
            else { //1
                result = the_moment.format('MM-DD HH:mm:ss');
            }
        }

        return result;
    }

</script>
